<script lang="ts" setup>
import { ref, onMounted, computed } from 'vue';
import { tryit } from 'radash';
import mockApi from '@/api/mock';
import { useLoading } from '@/hooks/useLoading';
import { setKvViewData } from '@/utils';
import { SUCCESS_CODE } from '@/constants';
import { MessagePlugin } from 'tdesign-vue-next';
import { requestCancel } from '@/utils/request';
import EditDialog from './components/EditDialog.vue';

const asyncLoadingRadio = ref('load-more');
const containerRef = ref();
const messageDialogRef = ref();
const editDialogRef = ref<InstanceType<typeof EditDialog>>();
const { loadingStart, loadingEnd } = useLoading(containerRef);
const dataInfo = ref({
  enable: false,
  connect_status: true,
  connect_equipment: 'TP-LINK_J5K0',
  ipv4: '192.168.2.64',
  subnet: '255,255,255,0',
  default: '192.168.2.1',
  dns: '192.168.2.1',
});
const equipmentList = ref([
  { name: 'TP-LINK_J5K0' },
  { name: 'TP-LINK_J5K1' },
  { name: 'TP-LINK_J5K2' },
  { name: 'TP-LINK_J5K3' },
  { name: 'TP-LINK_J5K4' },
  { name: 'TP-LINK_J5K5' },
  { name: 'TP-LINK_J5K6' },
  { name: 'TP-LINK_J5K7' },
  { name: 'TP-LINK_J5K8' },
  { name: 'TP-LINK_J5K9' },
]);
const detailData: any = ref({});

const list = ref([
  { label: 'IPV4地址', key: 'ipv4', value: '' },
  { label: '网关地址', key: 'subnet', value: '' },
  { label: '子网掩码', key: 'default', value: '' },
  { label: 'DNS', key: 'dns', value: '' },
]);

const setData = (data: any) => {
  list.value = setKvViewData(list.value, { ...data });
};
async function getData() {
  loadingStart();

  loadingEnd();
}
const loadMore = () => {
  asyncLoadingRadio.value = 'loading';
};

const asyncLoading = computed(() => {
  setTimeout(() => {
    asyncLoadingRadio.value = 'loading-custom';
  }, 2000);
  if (asyncLoadingRadio.value === 'loading-custom') {
    return '没有更多数据了';
  }
  return asyncLoadingRadio.value;
});

const delWLAN = () => {
  messageDialogRef.value.open();
};

const messageDialogSure = async () => {
  messageDialogRef.value.close();
  MessagePlugin.success('操作成功');
  return;
  const [err, res] = await tryit(mockApi.del)({ id: detailData.value.id });

  if (!err && res.code === SUCCESS_CODE) {
    messageDialogRef.value.close();
    await MessagePlugin.success('操作成功');
  }
};

const messageDialogClose = () => {
  requestCancel('/mock/del', 'post');
};

const connectFun = (data: any) => {
  console.log('WIFI信息', data);
  detailData.value = data;
  editDialogRef.value.open();
};

onMounted(() => {
  setData(dataInfo.value);
});
</script>

<template>
  <div class="WLAN-wrap">
    <div class="common-item-view top-info">
      <t-row :gutter="[0, 16]">
        <t-col :span="12">
          <div class="item">
            <div class="label" style="width: 80px">启用禁用</div>
            <div class="value">
              <t-switch v-model="dataInfo.enable" size="large" :label="['ON', 'OFF']"></t-switch>
            </div>
          </div>
        </t-col>
        <t-col :span="12">
          <div class="item">
            <div class="label" style="width: 80px">连接状态</div>
            <div class="value">
              <svg-icon
                class="item-icon"
                style="margin-right: 9px"
                v-if="dataInfo.connect_status"
                name="item-open"
              ></svg-icon>
              <svg-icon
                class="item-icon"
                style="width: 12px; height: 12px; margin-right: 9px"
                v-else
                name="item-error"
              ></svg-icon>
              <span>{{ dataInfo.connect_status ? '连接成功' : '连接失败' }}</span>
              <p style="margin-left: 14px; font-size: 12px">{{ dataInfo.connect_equipment }}</p>
            </div>
          </div>
        </t-col>
      </t-row>
    </div>
    <div class="common-item-view">
      <t-row :gutter="[0, 46]">
        <t-col v-for="(item, index) in list" :key="index" :span="index % 2 === 0 ? 4 : 8">
          <div class="item">
            <div class="label" style="width: 80px; text-align: end; margin-right: 20px">{{ item.label }}</div>
            <div class="value">{{ item.value }}</div>
          </div>
        </t-col>
      </t-row>
    </div>
    <div class="available-wrap">
      <title-view title="可用列表" icon="item-info"></title-view>
      <div class="available-right">
        <svg-icon class="item-icon" name="options-update"></svg-icon>
        <t-link theme="primary" style="margin-left: 8px" underline>刷新</t-link>
      </div>
    </div>

    <div class="available" ref="containerRef">
      <div class="available-top">
        <div class="left">
          <div>{{ dataInfo.connect_equipment }}</div>
          <div>{{ dataInfo.connect_status ? '已连接' : '未连接' }}</div>
        </div>
        <div class="right">
          <svg-icon class="item-icon" name="options-disabled" @click="delWLAN"></svg-icon>
          <svg-icon class="item-icon" style="margin-left: 10px; margin-right: 20px" name="options-help"></svg-icon>
        </div>
      </div>
      <t-list :async-loading="asyncLoading" class="available-list" split @load-more="loadMore">
        <t-list-item
          v-for="(item, index) in equipmentList"
          :class="item.name === dataInfo.connect_equipment ? 't-list-item-checked' : ''"
          :key="index"
        >
          <div class="available-ctn" @click="connectFun(item)">{{ item.name }}</div>
          <template #action>
            <svg-icon class="item-icon" style="margin-right: 10px" name="options-lock"></svg-icon>
            <svg-icon class="item-icon" name="options-wifi"></svg-icon>
          </template>
        </t-list-item>
      </t-list>
    </div>
    <message-dialog
      ref="messageDialogRef"
      title="提示消息"
      tip="是否删除该wifi连接？"
      type="tip"
      :show-cancel="true"
      @sure="messageDialogSure"
      @close="messageDialogClose"
    ></message-dialog>
    <edit-dialog
      ref="editDialogRef"
      :title="`连接到：${detailData.name}`"
      :data="detailData"
      @sure="getData"
    ></edit-dialog>
  </div>
</template>

<style lang="less" scoped>
.WLAN-wrap {
  width: 100%;
  .top-info {
    border-radius: 5px;
    box-shadow: 0px 5px 14px 0px rgba(0, 0, 0, 0.1);
    margin-top: 14px;
    .value {
      display: flex;
      align-items: center;
    }
  }
  .available-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .available-right {
      display: flex;
      align-items: center;
      margin-right: 12px;
      font-size: 12px;
    }
  }
  .available {
    width: 100%;
    padding: 14px;
    background-color: #fff;
    font-size: 12px;
  }
  .available-top {
    height: 48px;
    border-radius: 5px;
    padding-left: 14px;
    background-color: rgba(33, 106, 238, 0.1);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .available-list {
    border-radius: 5px;
    background: #f0f2f4;
    margin-top: 10px;
    padding: 20px 12px 4px;
    .available-ctn {
      width: 100%;
      height: 100%;
      cursor: pointer;
    }
    :deep(.t-list-item) {
      font-size: 12px;
      &::after {
        background-color: #fff;
      }
      &:hover {
        background-color: #d2e1fc;
      }
    }
    .t-list-item-checked {
      background-color: #d2e1fc;
    }
    :deep(.t-list__load) {
      background: #f0f2f4;
    }
  }
}
</style>
